<template>
  <el-dialog :destroy-on-close="true" :visible="isShow" @close="closeModal">
    <el-form label-suffix=":" label-width="100px">
      <el-form-item label="流程名称">
        <el-input v-model="flowName" disabled />
      </el-form-item>
      <el-form-item label="选择表单">
        <el-select v-model="selectFormID" filterable>
          <el-option v-for="item in formList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { GetFormConfigList, RelationshipForm } from '@/api/formManagement';
export default {
  name: 'RelationshipFormModal',
  props: {
    isShow: {
      type: Boolean,
      required: true,
      default: false
    },
    flowID: {
      type: String,
      required: true,
      default: ''
    },
    flowName: {
      type: String,
      required: true,
      default: ''
    },
    relationshipFormID: {
      type: Number | String,
      required: true,
      default: null
    }
  },
  data() {
    const { relationshipFormID } = this;
    return {
      formList: [],
      selectFormID: relationshipFormID
    };
  },
  mounted() {
    this.getFormList();
  },
  methods: {
    closeModal() {
      this.$emit('update:isShow', false);
    },
    getFormList() {
      GetFormConfigList().then(res => {
        this.formList = res.data;
      }, err => {
        this.$message.error(err.msg);
      });
    },

    save() {
      const { selectFormID, flowID } = this;
      RelationshipForm(flowID, selectFormID).then(res => {
        this.$message.success(res.msg);
        this.$emit('reloadList');
        this.closeModal();
      }, err => {
        this.$message.error(err.msg);
        this.closeModal();
      });
    }
  }
};
</script>

<style scoped>

</style>
